<template>
	<view class="scroll">
		<view class="title">
			Vertical Scroll
		</view>
		<view>
			纵向滚动
		</view>
		<view>
			<scroll-view class="scroll-y" scroll-y="true" @scroll="scroll" :scroll-top='ScrollTop' :scroll-into-view="id"
				scroll-with-animation="true">
				<view id="A" class="scroll-view-item uni-bg-red">A</view>
				<view id="B" class="scroll-view-item uni-bg-green">B</view>
				<view id="C" class="scroll-view-item uni-bg-blue">C</view>
			</scroll-view>
		</view>
		<view class="button" @click="into">
			<view data-id='A' :class="{active:'A'==change}">A</view>
			<view data-id='B' :class="{active:'B'==change}">B</view>
			<view data-id='C' :class="{active:'C'==change}">C</view>
		</view>
		<view class="goTop" @tap="goTop">返回顶部</view>
		<navigator url="../swiper/swiper">跳转到轮播图</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				timer: true,
				toList:[],
				change:'A',
				oldScrollTop:0,
				ScrollTop:0

			}
		},
		onReady() {
			this.getInfo()
		},
		methods: {
			// 点击tab标签滚到到相应页面
			into(e) {
				let id = e.target.dataset.id;
				if (id) {
					this.id = id
				}
			},
			scroll(e) {
						var scrollTop = e.detail.scrollTop
						this.oldScrollTop=e.detail.scrollTop
						if(scrollTop<this.toList[0]){
							this.change='A'
						}else if(scrollTop<this.toList[1]&&scrollTop>this.toList[0]){
							this.change='B'
						}else{
							this.change='C'
						}

			},
			getInfo(){
				const query = uni.createSelectorQuery().in(this);
				query.selectAll(".scroll-view-item").boundingClientRect().exec(res=>{
					let nodes=res[0];
					let arr=[];
					nodes.map(item=>{
						arr.push(item.top)
					})
					this.toList=arr;
				})
			},
			goTop(e){
			
				this.ScrollTop=this.oldScrollTop
				this.$nextTick(()=>{
					this.ScrollTop=0
				})
					
			},
			lower(e) {
				console.log(e);
			},
			upper(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="less">
	.scroll {
		font-size: 16rpx;

		.title {
			font-size: 20rpx;
			padding: 19rpx 0;
		}

		>view:nth-child(2) {
			color: #666;
		}
	}

	.scroll-y {
		display: flex;
		width: 100%;
		height: 200rpx;

		.scroll-view-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 200rpx;
			color: white;
		}

		.uni-bg-red {
			background-color: pink;
		}

		.uni-bg-blue {
			background-color: skyblue;
		}

		.uni-bg-green {
			background-color: lightgreen;
		}
	}

	.button {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		height: 50rpx;
		margin-top: 16rpx;

		>view {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 25%;
			color: white;
			background-color: purple;
			border-radius: 5rpx;
		}
	}
	.active{
		background-color: orangered !important;
	}
	.goTop{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
		background-color: #C0C0C0;
		color: #eee;
	}
</style>
